<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>


<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


</head>
<body>
<div class="container">
<!--    标题部分-->
    <div>
        <h1>系统公告客户端设计及实现(BootStrap+jquery)</h1>
    </div>
    <div>
<!--        内容部分-->
        <div id="noticeListContainer">
            <form id="queryForm" style="display: inline">
                <input type="text" name="title" placeholder="请输入标题">
                <input type="button" value="查询" onclick="doQueryNotices()">
            </form>
            <button onclick="doDisplay()">添加</button>
            <h2>内容列表区</h2>
            <table class="table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>标题</th>
                        <th>类型</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td colspan="6">数据正在加载中......</td>
                    </tr>
                </tbody>
            </table>
            <div class="pagination">
                <button class="pre">上一页</button>
                <button class="percent">1/1</button>
                <button class="next">下一页</button>
                <form style="display: inline">
                    <input id="pageForm" type="text" name="pageCurrent">
                    <input type="button" value="跳转" class="jump">
                </form>
            </div>
        </div>

        <div id="noticeEditContainer" style="display: block">
            <h2>公共编辑区(添加或更新)</h2>
            <form>
                <input type="hidden" id="id">
                <div class="form-group">
                    <label for="typeId" >类型:</label>
                    <select class="form-control" id="typeId">
                        <option value="1">通知</option>
                        <option value="2">公告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="titleId">标题:</label>
                    <input type="text" class="form-control" id="titleId" placeholder="title">
                </div>
                <div class="form-group">
                    <label for="contentId">内容:</label>
                    <textarea class="form-control" rows="3" id="contentId">
                   </textarea>
                </div>
                <div class="form-group">
                    <label>状态:</label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0" checked> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1"> 关闭
                    </label>
                </div>
                <button type="button" class="btn btn-primary submit" onclick="doSaveOrUpdate()">Submit</button>
                <button type="button" class="btn btn-primary cancel">Cancel</button>
            </form>
        </div>
    </div>
</div>



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<script>
    //设置div容器的隐藏或显示
    function doDisplay() {
        //上编辑区显示
       // $("#noticeEditContainer").css("display","block");
        //让列表区隐藏
        //$("#noticeListContainer").css("display","none");

    }

    function  doFindById(id) {
        //1.基于id查找通告信息
        let url=`http://localhost/notice/${id}`;
        $.ajax({
            url:url,
          //  async:false,//同步
            success(result){
                if (result.state==1){//2.初始化表单数据
                    doInitEditForm(result);
                }else {
                    alert("没有对应的纪录");
                }
            }
        })
        //2.基于找到的内容初始化表单
    }

    function doInitEditForm(result) {
        $("#id").val(result.data.id);
        $(`#noticeEditForm select>option[value=${result.data.type}]`).prop("selected",true)
        $("#titleId").val(result.data.title);
        $("#contentId").val(result.data.content);
        $(`#editNoticeForm input[value=${result.data.status}]:radio`).prop("checked",true);

    }

    //添加或更新通告信息
    function doSaveOrUpdate(id) {
        // if (id){//js中数值型非0即为true,其他为空串,undefined等都是true
        //     doInitEditForm(id);
        // }

        //1.获取请求参数
        let params={
            id:$("#id").val(),
            type:$("#typeId").val(),
            title:$("#titleId").val(),
            content:$("#contentId").val(),
            status:$("#noticeEditForm input:radio:checkbox").val()
        }
        //2.定义请求url
        let url = "http://localhost/notice/";
        //3.发送异步请求
         $.ajax({
            method:params.id?"put":"post",
             url:url,
             data:JSON.stringify(params),//将js对象转换为json字符串
             contentType:"application/json",//向服务端传递的数据类型
             success(result){
                if (result.state==1){
                    alert(result.message);
                    doGetNotices();
                    doRestForm();//重置表单数据
                }else{
                    alert(result.message);
                }
             }
         });
    }

    function doRestForm(){//重置表单数据
        $("#id").val("");
        $(`#noticeEditForm select>option[value=1]`).prop("selected",true)
        $("#titleId").val("");
        $("#contentId").val("");
        $(`#noticeEditForm input[value=0]:radio`).prop("checked",true)
    }

    //点击查询按钮时基于条件查询通告信息
    function doQueryNotices(){
        //1.初始化分页页码
        localStorage.setItem("pageCurrent",1);
        ///2.基于条件进行查询
        doGetNotices();
    }



    //jquery中定义的页面加载函数(页面加载完成执行)
    $(function(){//页面加载完成执行

        doGetNotices();
        //分页事件注册及处理
        //在类选择器为pagination的容器对象注册click事件,当点击容器内部的pre,next,jump类元素时
        //跳转到指定页码
        $(".pagination").on("click",".pre,.next,.jump",doJumpToPage);
    });
    //基于分页按钮点击事件,进行分页查询
    function doJumpToPage(){
        //1.获取被点击对象的class属性值
        //$(this)表示被点击的对象
        //prop(属性名[,属性值])为jquery中用于操作属性值的一函数
        let cls = $(this).prop("class");
        //2.基于被点击对象的class属性值修改当前页码值
        //2.1获取当前页码值,总页数
        //如果没有转换成整数,会出现一些错误如:字符串比较时"12"<"3" 这样就导致程序出错
        let pageCurrent=parseInt(localStorage.getItem("pageCurrent"));//当前页码值
        let pageCount=parseInt(localStorage.getItem("pageCount"));//总页数
        //2.2修改当前页码值
        if (cls=="pre"&&pageCurrent>1){
            pageCurrent--;
        }else if (cls=="next"&&pageCurrent<pageCount){
            pageCurrent++;
        }else if(cls=="jump"){
            //获取form表单中元素为input,名字为pageCurrent的值
           let pageC=$("#pageForm input[name=pageCurrent]").val();
           console.log("pagec=",pageC);
           console.log("pageCount",pageCount)
           if (pageC<1||pageC>pageCount){
               alert("页码值不合法");
               $("#pageForm input[name=pageCurrent]").val("");//赋初始值
               return;
           }
           pageCurrent = pageC;
           $("#pageForm input[name=pageCurrent]").val("");//赋初始值
        }else{
            //第一页往前跳什么都不做
            //最后一页往后跳什么都不干
            return;
        }
        console.log("pageCurrent",pageCurrent)
        window.localStorage.setItem("pageCurrent",pageCurrent);
        //3.基于新的页码值重新执行查询
        doGetNotices();
    }


    //条件查询通知通告信息
    function doGetNotices() {
        //定义请求参数
        let pageCurrent = window.localStorage.getItem("pageCurrent");

        if (pageCurrent==''||pageCurrent=="NaN"||pageCurrent=="undefined"){
            pageCurrent=1;
        }
        let params={pageCurrent:pageCurrent};

        let title = $("#queryForm input[name=title]").val();
        params.title = title;

        console.log("params",params);
        //定义请求url
        let url = "http://localhost/notice/";
        //基于jquery中的ajax函数向服务端发起异步请求
        //$代表jquery对象
        $.ajax({
            method: "GET",

           //data: params,
            url: "http://localhost/notice/",
            success(result) {//服务端没有抛出异常到客户端时执行此函数,result为服务端响应的结果
                console.log("resultstate=",result.state)
                doHandleQueryResponseResult(result);

            }
            //data:""
        })
    }
    //处理查询响应结果
    function doHandleQueryResponseResult(result){
        console.log("我被执行了doHandleQUery");
        console.log("state",result.state);
        if (result.state==1){
            doHandleQueryOk(result);
        }else{
            doHandleQueryError();
        }
    }

    function doHandleQueryError() {
        console.log("我跑进来了吗?")

        //1.更新tbody内容
        let tBody = $("table>tbody");
        tBody.empty();//清空tbody内容
        let  len = $("table>thead>tr>th").length;
        let tr = `<tr><td colspan="${len}">没有找到对应纪录</td></tr>`
        tBody.append(tr);
        //2.刷新页码值
        $(".pagination.percent").html("1/1");
    }


    function doHandleQueryOk(result) {
        //设置tbody中的内容
        let records = result.data.list;
        doSetTableBodyRows(result.data.list);

        //设置分页信息
        if (records.length>0)
        doSetPagination(result);
    }

    //初始化分页信息
    function doSetPagination(result){
        //初始化页面上的分页数据
        let pageCurrent = result.data.pageNum;//当前页码数
        let pageCount = result.data.pages;//总页数
        console.log("pageCount=",pageCount);
        $(".percent").html(pageCurrent+"/"+pageCount);
        //将当前页码值存储搭配浏览器的localStorage对象中,便于其他方法后续应用
        localStorage.setItem("pageCurrent",pageCurrent);
        localStorage.setItem("pageCount",pageCount);
    }

    //设置tbody中的公告或通知信息
    function doSetTableBodyRows(records) {
        //1.获取tbody对象,并清空原有内容
        let tBody = $("tbody");//获取tbody内容
        tBody.empty();//清空tbody内容
        //2.迭代records中的内容,并追加到tbody中
        // if (records.length==0){
        //     let  len = $("table>thead>tr>th").length;
        //     let tr = `<tr><td colspan="${len}">没有找到对应纪录</td></tr>>`
        //     tBody.append(tr);
        //     $(".pagination.percent").html("1/1");
        //     return;
        // }
        //forEach为js中的原生函数,item为数组中的一个元素,i为元素下表
       // records.forEach((item,i)=>tBody.append(doCreateRow(item,i)))
        $.each(records,(i,item)=>tBody.append(doCreateRow(i,item)));

        // records.forEach(function (item,i) {
        //     let tr = doCreateRow(item,i);
        //     tBody.append(tr);
        // })

    }

    //创建tr对象并填写每一列的内容
    function doCreateRow(i,item) {
        // return '<tr>' +
        //     '<td>1</td>' +
        //     '<td>${item.title}</td>' +
        //     '<td>${item.type}</td>' +
        //     '<td>${item.status}</td>' +
        //     '<td>${item.createdTime}</td>' +
        //     '<td>delete</td>' +
        //     '</tr>'
        return `<tr>
                    <td>${i+1}</td>
                    <td>${item.title}</td>
                    <td>${item.type=='1'?"通知":"公告"}</td>
                    <td>${item.status=='0'?"正常":"关闭"}</td>
                    <td>${item.createdTime}</td>
                    <td><button class="btn btn-success" onclick="doFindById(${item.id})">修改</button>
                        <button class="btn btn-danger" onclick="deleteById(${item.id})">删除</button>
                    </td>
                </tr>`
    }



    function deleteById(id){
        //1.定义请求参数
        //2.定义请求url
        //3.发送异步请求
        doDeleteById(id);
    }

    function doDeleteById(id) {
        let ID = parseInt(id);
        $.ajax({
            method: "delete",
            url: "http://localhost/notice/"+ID,
            success(result) {
                doHandleDeleteResponseResult(result);
            },
        })
    }

    function doHandleDeleteResponseResult(result){
        if (result.state==1){
            //doHandleDeleteOk()
            doHandleDeleteOk(result.message);

        }else {
            //doHandleDeleteError()
            alert(result.message);
        }
    }

    function doHandleDeleteOk(msg){
        //1.给出提示信息
        alert(msg);
        //2.设置当前页码值(加入是最后一页,没有数据了应该返回上一页)
        let rows = $("table>tbody>tr").length;
        let pageCurrent = parseInt(localStorage.getItem("pageCurrent"));
        let pageCount = parseInt(localStorage.getItem("pageCount"));
        if (pageCurrent>1&&pageCurrent==pageCount&&rows==1){
            pageCurrent--;
            localStorage.setItem("pageCurrent",pageCurrent);
        }
        doGetNotices();
    }




</script>

</body>
</html>